<template>
  <div class="rate">
    <div class="titles">
      项目动态评级
      <el-tooltip content="Top center" placement="top" effect="dark">
        <div slot="content">仅统计状态为已开工的项目评级分布情况</div>
        <i class="icon iconfont iconhuabanfuben"></i>
      </el-tooltip>
    </div>
    <el-row class="chart">
      <div class="leftPart">
        <img :src="require('@/assets/newHome/Fill.png')" alt="" />
        <p class="num">{{ gradeTotal }}</p>
        <p class="title">欠薪隐患项目(个)</p>
        <el-button type="primary" @click="toOnlineLaw">在线执法</el-button>
      </div>
      <div class="rightPart" id="chart"></div>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'rate',
  data() {
    return {
      gradeList: [],
      areaIds: this.areaId,
      gradeTotal: 0,
    }
  },
  props: ['areaId'],
  watch: {
    areaId: {
      handler(newval, oldval) {
        if (newval) {
          this.areaIds = newval
          this.getProEvaluate(newval)
        }
        return newval
      },
      deep: true,
    },
  },
  mounted() {
    this.getProEvaluate(this.areaId)
  },
  methods: {
    toOnlineLaw() {
      this.$router.push({
        name: 'proposal',
        path: ' /home/onlineLaw/proposal',
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: ' /home/onlineLaw/proposal',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    getProEvaluate(areaId) {
      this.axios
        .post('api-ps/creditProjectScore/expand/findProjectGrade', { areaId })
        .then((res) => {
          if (!res.data.hasError) {
            this.gradeTotal = res.data.result.backPayProjectTotal
            this.gradeList = res.data.result.projectGradeList.filter(
              (v) => v.level != 'O'
            ) //不显示其他评价
            this.initLineChart({ id: 'chart', data: this.gradeList }) //项目动态评价
          } else {
            this.$message.error('评价数据获取失败')
          }
        })
    },
    initLineChart(params) {
      let that = this
      const { id, color, data } = params
      let lineChart = this.$echarts.init(document.getElementById(id))
      const colors = color || ['#6395FA', '#65DAAB']
      let seriesData = []
      data.forEach((item, index) => {
        let arr = [item.level + '级项目', item.total, item.scale]
        seriesData.push(arr)
      })
      let options = {
        color: colors,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
          },
          padding: [10, 12],
          formatter: function (val) {
            let value = val[0]
            return ` <p style='font-size:16px'>${value.name}</p> 
                        <p style='height:22px;line-height: 22px' > 
                        <span style='display: inline-block;width: 10px;height: 10px;border-radius: 50%;background-color: #6395FA;'></span>
                        项目数：${value.value[1]}</p>
                        <p style='height:22px;line-height: 22px'> 
                        <span style='display: inline-block;width: 10px;height: 10px;border-radius: 50%;background-color: #65DAAB;'></span>
                        比例： ${value.value[2]}%</p>`
          },
        },
        grid: {
          top: '94',
          left: '40',
          right: '40',
          bottom: '15',
          containLabel: true,
        },
        dataset: {
          source: seriesData,
        },
        legend: [
          {
            top: 10,
            right: 100,
            itemWidth: 10,
            itemHeight: 10,
            data: [
              {
                name: '项目数',
              },
            ],
          },
          {
            top: 10,
            right: 30,
            itemWidth: 20,
            itemHeight: 10,
            data: [
              {
                name: '比例',
              },
            ],
          },
        ],
        xAxis: {
          type: 'category',
          axisTick: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              color: '#416180',
              width: 0.5,
              opacity: 0.15,
            },
          },
          axisLabel: {
            padding: [10, 0, 0, 0],
          },
          axisLine: {
            lineStyle: {
              color: '#485465',
              opacity: 0.15,
              width: 0.5,
              fontSize: 12,
            },
          },
        },
        yAxis: [
          {
            nameTextStyle: {
              padding: [0, 0, 5, -30],
            },
            type: 'value',
            name: '单位：个',
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: '#A0A4AA',
                opacity: 0.15,
                width: 0.5,
              },
            },

            splitLine: {
              lineStyle: {
                color: '#416180',
                opacity: 0.15,
                width: 0.5,
              },
            },
          },
          {
            type: 'value',
            name: '比例',
            nameTextStyle: {
              padding: [0, -40, 5, 0],
            },
            min: 0,
            max: 100,
            interval: 20,
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: '#A0A4AA',
                opacity: 0.15,
                width: 0.5,
              },
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#416180',
                opacity: 0.15,
                width: 0.5,
              },
            },
            axisLabel: {
              formatter: '{value} %',
            },
          },
        ],
        series: [
          {
            name: '项目数',
            type: 'bar',
            barWidth: 20,
          },
          {
            name: '比例',
            type: 'line',
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 1, //设置线条粗细
                },
              },
            },
          },
        ],
      }
      lineChart.setOption(options)
      lineChart.on('click', function (params) {
        // 在用户点击后控制台打印数据的名称
        let num = params.value[1]
        let routerUrl = '/home/enterpriseScore/projectScoreList'
        let grade = params.value[0].split('级项目')[0]
        if (num == 0 || num == '0') {
          return
        } else if (that.accessControl(routerUrl) == -1) {
          that.goNoAccessPage()
        } else {
          that.$router.push({
            name: 'projectScoreList',
            path: '/home/enterpriseScore/projectScoreList',
            query: {
              status: 'STARTED',
              areaId: that.areaId,
              gradeLevel: grade,
              type: 'gradeLevelModular',
            },
          })
          that.$store.commit('CHANGE_SLIDER_NAME', {
            oldUrl: '/home/enterpriseScore/projectScoreList',
            newUrl: that.$router.currentRoute.fullPath,
          })
        }
      })
      window.addEventListener('resize', () => {
        lineChart.resize()
      })
    },
  },
}
</script>

<style lang="less" scoped>
.rate {
  background-color: #fff;
  margin-top: 10px;
  position: relative;
  z-index: 10;
  height: 260px;
  &::after {
    position: absolute;
    content: '';
    left: 0;
    right: 0;
    top: 40px;
    height: 1px;
    width: 100%;
    background-color: #e3e7e9;
    z-index: 12;
  }
  .titles {
    position: absolute;
    width: 50%;
    top: 0;
    left: 0;
    height: 40px;
    z-index: 11;
    height: 40px;
    line-height: 40px;
    // border-bottom: 1px solid #E3E7E9;
    padding: 0 16px;
    color: #333;
    font-size: 16px;
    font-weight: 700;
    .iconfont {
      color: #666;
    }
  }
  .chart {
    height: 260px;
    position: relative;
    padding-left: 180px;
    .leftPart {
      position: absolute;
      width: 144px;
      height: 190px;
      top: 55px;
      left: 20px;
      background-color: #f9f9f9;
      border-radius: 4px;
      text-align: center;
      img {
        display: block;
        width: 34px;
        height: 40px;
        margin: 20px auto 16px;
      }
      .num {
        height: 28px;
        font-size: 28px;
        color: #ff7c00;
        font-weight: 700;
      }
      .title {
        font-size: 12px;
        color: #666;
        margin-top: 8px;
      }
      .el-button {
        margin-top: 22px;
        width: 100px;
        height: 32px;
        line-height: 32px;
        padding: 0;
        background: #3189ea;
        border-radius: 4px;
      }
    }
    .rightPart {
      width: calc(100%);
      height: 100%;
    }
  }
}
</style>
>
